<template>
	<view class="contract-sign-container">
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="navigateTo(item)" v-for="item in menuList" :key="item.title">
				<image :src="item.icon" class="menu-icon"></image>
				<text>{{item.title}}</text>
				<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSignableContractList
	} from '@/api/app.js'
	export default {
		data() {
			return {
				menuList: []
			}
		},
		onLoad() {
			this.getSignableContractList()
		},
		methods: {
			async getSignableContractList() {
				const res = await getSignableContractList()
				if (res.code === 1) {
					this.menuList = res.data && res.data.map((item => {
						return {
							title: item.desc,
							name: item.name,
							status: item.status,
							icon: '/static/templates.png',
							id: item.id
						}
					}))
				}
			},
			navigateTo(item) {
				uni.navigateTo({
					url: `/pages/contractDetails/index?id=${item.name}&title=${item.title}`
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.contract-sign-container {
		padding: 20rpx 30rpx;
		min-height: 100vh;
		box-sizing: border-box;

		.menu-list {
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 30rpx;

			.menu-item {
				display: flex;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.menu-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				text {
					flex: 1;
					font-size: 28rpx;
				}
			}
		}
	}
</style>